<template>
  <div class="seeker-login-container">
    <div class="background-decoration">
      <div class="decoration-circle circle-1"></div>
      <div class="decoration-circle circle-2"></div>
      <div class="decoration-circle circle-3"></div>
    </div>

    <div class="login-card">
      <div class="card-header">
        <div class="logo">
          <el-icon :size="32" color="#ff7f00">
            <UserFilled />
          </el-icon>
          <span class="logo-text">OrangeHire</span>
        </div>
        <p class="welcome-text">发现理想工作，开启职业新篇章</p>
      </div>

      <div class="card-tabs">
        <div
          class="tab-button"
          :class="{ active: activeTab === 'login' }"
          @click="activeTab = 'login'"
        >
          <el-icon><User /></el-icon>
          <span>登录</span>
        </div>
        <div
          class="tab-button"
          :class="{ active: activeTab === 'register' }"
          @click="activeTab = 'register'"
        >
          <el-icon><UserFilled /></el-icon>
          <span>注册</span>
        </div>
      </div>

      <!-- 登录表单 -->
      <div v-show="activeTab === 'login'" class="form-content">
        <el-form
          ref="loginFormRef"
          :model="loginForm"
          :rules="loginRules"
          class="auth-form"
          size="large"
        >
          <el-form-item prop="email">
            <div class="input-wrapper">
              <el-input
                v-model="loginForm.email"
                placeholder="请输入邮箱"
                prefix-icon="Message"
                clearable
              />
            </div>
          </el-form-item>

          <el-form-item prop="password">
            <div class="input-wrapper">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="请输入密码"
                prefix-icon="Lock"
                show-password
                clearable
              />
            </div>
          </el-form-item>

          <el-form-item>
            <div class="form-options">
              <el-checkbox v-model="loginForm.remember" class="remember-checkbox">
                记住我
              </el-checkbox>
              <el-link type="primary" :underline="false" class="forgot-link">
                忘记密码？
              </el-link>
            </div>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="auth-btn login-btn"
              :loading="loading"
              @click="handleLogin"
            >
              <el-icon><Right /></el-icon>
              立即登录
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 注册表单 -->
      <div v-show="activeTab === 'register'" class="form-content">
        <el-form
          ref="registerFormRef"
          :model="registerForm"
          :rules="registerRules"
          class="auth-form"
          size="large"
        >
          <el-form-item prop="name">
            <div class="input-wrapper">
              <el-input
                v-model="registerForm.name"
                placeholder="请输入姓名"
                prefix-icon="User"
                clearable
              />
            </div>
          </el-form-item>

          <el-form-item prop="email">
            <div class="input-wrapper">
              <el-input
                v-model="registerForm.email"
                placeholder="请输入邮箱"
                prefix-icon="Message"
                clearable
              />
            </div>
          </el-form-item>

          <el-form-item prop="password">
            <div class="input-wrapper">
              <el-input
                v-model="registerForm.password"
                type="password"
                placeholder="设置密码（6-20位）"
                prefix-icon="Lock"
                show-password
                clearable
              />
            </div>
          </el-form-item>

          <el-form-item prop="confirmPassword">
            <div class="input-wrapper">
              <el-input
                v-model="registerForm.confirmPassword"
                type="password"
                placeholder="确认密码"
                prefix-icon="Lock"
                show-password
                clearable
              />
            </div>
          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="registerForm.agree" class="agree-checkbox">
              我已阅读并同意
              <el-link type="primary" :underline="false">《用户协议》</el-link>
              和
              <el-link type="primary" :underline="false">《隐私政策》</el-link>
            </el-checkbox>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              class="auth-btn register-btn"
              :loading="loading"
              @click="handleRegister"
            >
              <el-icon><Plus /></el-icon>
              立即注册
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="card-footer">
        <div class="divider">
          <span>或者</span>
        </div>
        <div class="social-login">
          <el-button class="social-btn" circle>
            <el-icon><Platform /></el-icon>
          </el-button>
          <el-button class="social-btn" circle>
            <el-icon><ChatDotRound /></el-icon>
          </el-button>
          <el-button class="social-btn" circle>
            <el-icon><Iphone /></el-icon>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import {
  UserFilled,
  User,
  Right,
  Plus,
  Platform,
  ChatDotRound,
  Iphone
} from '@element-plus/icons-vue'

const loginFormRef = ref()
const registerFormRef = ref()
const loading = ref(false)
const activeTab = ref('login')

const loginForm = reactive({
  email: '',
  password: '',
  remember: false
})

const registerForm = reactive({
  name: '',
  email: '',
  password: '',
  confirmPassword: '',
  agree: false
})

const loginRules = {
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
}

const registerRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, message: '姓名长度不能少于2位', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6-20位', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },
    {
      // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
      validator: (rule: unknown, value: string, callback: Function) => {
        if (value !== registerForm.password) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

const handleLogin = async () => {
  try {
    await loginFormRef.value.validate()
    loading.value = true

    // TODO: 调用登录API
    setTimeout(() => {
      loading.value = false
      ElMessage.success('登录成功，欢迎回来！')
    }, 1000)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const handleRegister = async () => {
  try {
    await registerFormRef.value.validate()
    if (!registerForm.agree) {
      ElMessage.warning('请先同意用户协议和隐私政策')
      return
    }

    loading.value = true

    // TODO: 调用注册API
    setTimeout(() => {
      loading.value = false
      ElMessage.success('注册成功，欢迎加入！')
      activeTab.value = 'login'
    }, 1000)
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
.seeker-login-container {
  min-height: 100vh;
  background: #fafbfc;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.background-decoration {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.decoration-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.1;
}

.circle-1 {
  width: 200px;
  height: 200px;
  background: #ff7f00;
  top: 10%;
  left: 10%;
  animation: float 6s ease-in-out infinite;
}

.circle-2 {
  width: 150px;
  height: 150px;
  background: #409eff;
  top: 60%;
  right: 15%;
  animation: float 8s ease-in-out infinite reverse;
}

.circle-3 {
  width: 100px;
  height: 100px;
  background: #ff7f00;
  bottom: 20%;
  left: 20%;
  animation: float 10s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  padding: 40px;
  position: relative;
  z-index: 1;
}

.card-header {
  text-align: center;
  margin-bottom: 30px;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.logo-text {
  font-size: 28px;
  font-weight: bold;
  margin-left: 12px;
  background: linear-gradient(135deg, #ff7f00, #409eff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-text {
  color: #666;
  font-size: 16px;
  margin: 0;
  line-height: 1.5;
}

.card-tabs {
  display: flex;
  background: #f8f9fa;
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 30px;
}

.tab-button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.tab-button.active {
  background: white;
  color: #ff7f00;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.form-content {
  margin-bottom: 20px;
}

.auth-form .el-form-item {
  margin-bottom: 20px;
}

.input-wrapper {
  position: relative;
}

.input-wrapper .el-input {
  border-radius: 12px;
}

.input-wrapper .el-input__wrapper {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e4e7ed;
  transition: all 0.3s;
}

.input-wrapper .el-input__wrapper:hover {
  border-color: #ff7f00;
}

.input-wrapper .el-input__wrapper.is-focus {
  border-color: #ff7f00;
  box-shadow: 0 0 0 2px rgba(255, 127, 0, 0.1);
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.remember-checkbox,
.agree-checkbox {
  font-size: 14px;
}

.forgot-link {
  font-size: 14px;
}

.auth-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.3s;
}

.login-btn {
  background: #ff7f00;
  border-color: #ff7f00;
}

.login-btn:hover {
  background: #ff9500;
  border-color: #ff9500;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 127, 0, 0.3);
}

.register-btn {
  background: #409eff;
  border-color: #409eff;
}

.register-btn:hover {
  background: #66b1ff;
  border-color: #66b1ff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(64, 158, 255, 0.3);
}

.card-footer {
  margin-top: 30px;
}

.divider {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
}

.divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: #e4e7ed;
}

.divider span {
  background: white;
  padding: 0 16px;
  color: #909399;
  font-size: 14px;
  position: relative;
  z-index: 1;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.social-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid #e4e7ed;
  background: white;
  color: #666;
  transition: all 0.3s;
}

.social-btn:hover {
  border-color: #ff7f00;
  color: #ff7f00;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@media (max-width: 480px) {
  .login-card {
    padding: 30px 20px;
    margin: 10px;
  }

  .logo-text {
    font-size: 24px;
  }

  .welcome-text {
    font-size: 14px;
  }
}
</style>
